import React, { useEffect, useState } from 'react';
import { CheckCircleOutlined, TrophyOutlined, StarOutlined, FireOutlined } from '@ant-design/icons';
import styles from './CelebrationAnimation.module.css';

interface CelebrationAnimationProps {
  visible: boolean;
  onAnimationEnd: () => void;
}

const CelebrationAnimation: React.FC<CelebrationAnimationProps> = ({ 
  visible, 
  onAnimationEnd 
}) => {
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    if (visible) {
      setIsAnimating(true);
      // 动画持续4秒后自动消失
      const timer = setTimeout(() => {
        setIsAnimating(false);
        onAnimationEnd();
      }, 4000);

      return () => clearTimeout(timer);
    }
  }, [visible, onAnimationEnd]);

  if (!visible) return null;

  return (
    <div className={`${styles.celebrationOverlay} ${isAnimating ? styles.visible : ''}`}>
      <div className={styles.celebrationContainer}>
        {/* 主要庆祝内容 */}
        <div className={styles.mainContent}>
          <div className={styles.celebrationCenter}>
            <div className={styles.successIcon}>🎉</div>
            <h1 className={styles.celebrationTitle}>恭喜通过！</h1>
            <div className={styles.celebrationSubtitle}>ACCEPTED</div>
            <div className={styles.celebrationMessage}>太棒了！继续加油！</div>
          </div>
          
          {/* 中心烟花发射点 */}
          <div className={styles.centerFirework}>
            <div className={styles.fireworkLauncher}></div>
            <div className={styles.centerExplosion}>
              {Array.from({ length: 12 }).map((_, index) => (
                <div
                  key={index}
                  className={styles.centerSpark}
                  style={{
                    '--angle': `${index * 30}deg`,
                    '--delay': `${index * 0.1}s`,
                    '--color': ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd', '#ff4757', '#2ed573', '#1e90ff', '#ffa502'][index],
                  } as React.CSSProperties}
                ></div>
              ))}
            </div>
          </div>
        </div>

        {/* 奖杯雨效果 */}
        <div className={styles.trophyRain}>
          {Array.from({ length: 12 }).map((_, index) => (
            <div
              key={index}
              className={styles.fallingTrophy}
              style={{
                '--delay': `${index * 0.2}s`,
                '--left': `${Math.random() * 100}%`,
              } as React.CSSProperties}
            >
              🏆
            </div>
          ))}
        </div>

        {/* 大型烟花效果 */}
        <div className={styles.fireworks}>
          {Array.from({ length: 12 }).map((_, index) => (
            <div
              key={index}
              className={styles.firework}
              style={{
                '--delay': `${index * 0.2}s`,
                '--left': `${10 + index * 7}%`,
                '--size': `${80 + Math.random() * 60}px`,
              } as React.CSSProperties}
            >
              <div className={styles.fireworkCore}></div>
              <div className={styles.fireworkParticles}>
                {Array.from({ length: 16 }).map((_, particleIndex) => (
                  <div
                    key={particleIndex}
                    className={styles.fireworkParticle}
                    style={{
                      '--angle': `${particleIndex * 22.5}deg`,
                      '--color': ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd', '#ff4757', '#2ed573', '#1e90ff', '#ffa502'][Math.floor(Math.random() * 12)],
                    } as React.CSSProperties}
                  ></div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* 礼花效果 */}
        <div className={styles.firecrackers}>
          {Array.from({ length: 8 }).map((_, index) => (
            <div
              key={index}
              className={styles.firecracker}
              style={{
                '--delay': `${index * 0.15}s`,
                '--left': `${15 + index * 10}%`,
              } as React.CSSProperties}
            >
              <div className={styles.firecrackerCore}></div>
              <div className={styles.firecrackerSparks}>
                {Array.from({ length: 20 }).map((_, sparkIndex) => (
                  <div
                    key={sparkIndex}
                    className={styles.firecrackerSpark}
                    style={{
                      '--angle': `${sparkIndex * 18}deg`,
                      '--color': ['#ff6b6b', '#4ecdc4', '#feca57', '#ff9ff3', '#54a0ff'][Math.floor(Math.random() * 5)],
                    } as React.CSSProperties}
                  ></div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* 彩带效果 */}
        <div className={styles.confetti}>
          {Array.from({ length: 100 }).map((_, index) => (
            <div
              key={index}
              className={styles.confettiPiece}
              style={{
                '--delay': `${index * 0.05}s`,
                '--left': `${Math.random() * 100}%`,
                '--color': ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd', '#ff4757', '#2ed573', '#1e90ff', '#ffa502', '#ff6348', '#ff3838'][Math.floor(Math.random() * 14)],
                '--rotation': `${Math.random() * 360}deg`,
                '--size': `${8 + Math.random() * 12}px`,
              } as React.CSSProperties}
            />
          ))}
        </div>

        {/* 金色星星雨 */}
        <div className={styles.starRain}>
          {Array.from({ length: 30 }).map((_, index) => (
            <div
              key={index}
              className={styles.fallingStar}
              style={{
                '--delay': `${index * 0.1}s`,
                '--left': `${Math.random() * 100}%`,
                '--size': `${12 + Math.random() * 20}px`,
              } as React.CSSProperties}
            >
              ⭐
            </div>
          ))}
        </div>

        {/* 粒子爆炸效果 */}
        <div className={styles.particles}>
          {Array.from({ length: 30 }).map((_, index) => (
            <div
              key={index}
              className={styles.particle}
              style={{
                '--delay': `${index * 0.05}s`,
                '--angle': `${index * 12}deg`,
                '--color': ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57', '#ff9ff3', '#54a0ff', '#5f27cd'][Math.floor(Math.random() * 8)],
              } as React.CSSProperties}
            />
          ))}
        </div>



        {/* 闪烁的星星 */}
        <div className={styles.stars}>
          {Array.from({ length: 15 }).map((_, index) => (
            <div
              key={index}
              className={styles.star}
              style={{
                '--delay': `${index * 0.15}s`,
                '--position': `${index * 24}deg`,
              } as React.CSSProperties}
            >
              ⭐
            </div>
          ))}
        </div>

        {/* 庆祝文字 */}
        <div className={styles.celebrationText}>
          <div className={styles.textBubble}>🎊 太棒了！ 🎊</div>
          <div className={styles.textBubble}>💪 继续加油！ 💪</div>
          <div className={styles.textBubble}>🚀 下一个挑战！ 🚀</div>
        </div>
      </div>
    </div>
  );
};

export default CelebrationAnimation;
